import { DrawerForm, ProCard } from '@ant-design/pro-components';
import { Alert, Space, Spin } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import AreaReleaseMediaOverview from '../record/AreaReleaseMediaOverview';
import TableRecordReleaseMedia from '../record/TableRecordReleaseMedia';

interface ReportDetialProps {
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  onRefurbish: () => void;
}

const ReportDetial: React.FC<ReportDetialProps> = ({
  areaId,
  areaName,
  releaseTimes,
  onRefurbish,
}) => {
  const access = useAccess();

  const [tab, setTab] = useState('releaseMedia');

  return (
    <DrawerForm
      title={
        <Space>
          {areaName}
          <span>{releaseTimes.join(' - ')}</span>
          文化报表数据报告
        </Space>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={<a> {areaName}</a>}
      submitter={false}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 1200,
      }}
      onOpenChange={(visible) => {
        if (visible) {
        } else {
          onRefurbish();
        }
      }}
      submitTimeout={2000}
      onFinish={async (values) => {}}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={false}
      >
        <Alert
          message="评价各区县在中央主要媒体、市属主要媒体刊发正面好报道情况及相关报道传播情况，广告类报道不计分。"
          type="success"
          showIcon
        />
        {/* <AreaOverview areaId={areaId} releaseTimes={releaseTimes} /> */}

        <ProCard
          bodyStyle={{
            padding: 0,
          }}
          tabs={{
            activeKey: tab,
            items: [
              {
                label: (
                  <span
                    style={{
                      fontSize: 16,
                    }}
                  >
                    涉稿情况
                  </span>
                ),
                key: 'releaseMedia',
                children: (
                  <>
                    <AreaReleaseMediaOverview areaId={areaId} releaseTimes={releaseTimes} />
                    <TableRecordReleaseMedia
                      areaId={areaId}
                      areaName={areaName}
                      releaseTimes={releaseTimes}
                      onRefurbish={() => {}}
                    />
                  </>
                ),
              },
              // {
              //   label: (
              //     <span
              //       style={{
              //         fontSize: 16,
              //       }}
              //     >
              //       重点报道传播力评价
              //     </span>
              //   ),
              //   key: 'disseminationPriorityPlatform',
              //   children: (
              //     <>
              //       <AreaDisseminationPriorityOverview
              //         areaId={areaId}
              //         releaseTimes={releaseTimes}
              //       />
              //       <TableRecordDisseminationPriorityPlatform
              //         areaId={areaId}
              //         areaName={areaName}
              //         releaseTimes={releaseTimes}
              //         onRefurbish={() => {}}
              //       />
              //     </>
              //   ),
              // },
              // {
              //   label: (
              //     <span
              //       style={{
              //         fontSize: 16,
              //       }}
              //     >
              //       推动正能量登上热搜热榜评价
              //     </span>
              //   ),
              //   key: 'disseminationTophub',
              //   children: (
              //     <Result
              //       icon={<SmileOutlined />}
              //       title="该功能正在开发中，敬请期待!"
              //       // extra={<Button type="primary">Next</Button>}
              //     />
              //   ),
              // },
            ],
            onChange: (key) => {
              setTab(key);
            },
          }}
        />

        {/* <TableRecordDisseminationPriorityPlatform
          onRefurbish={() => {}}
          areaId={''}
          areaName={''}
          releaseTimes={[]}
        />
        <TableRecordDisseminationTophub onRefurbish={() => {}} /> */}
      </Spin>
    </DrawerForm>
  );
};
export default ReportDetial;
